<template>
    <el-form
        ref="loginForm"
        :model="loginUser"
        :rules="loginRules"
        label-width="100px"
        class="loginForm sign-in-form"
    >

        <el-form-item
            label="账号"
            prop="name"
        >
            <el-input
                v-model="loginUser.name"
                placeholder="账号"
                autocomplete="off"
            />
        </el-form-item>

        <el-form-item
            label="密码"
            prop="password"
        >
            <el-input
                v-model="loginUser.password"
                type="password"
                placeholder="请输入密码"
                autocomplete="off"
            />
        </el-form-item>

        <el-form-item>
            <el-button
                @click="handleLogin('loginForm')"
                type="primary"
                class="submit-btn"
            >提交</el-button>
        </el-form-item>

        <!-- 找回密码 -->
        <div class="tiparea">
            <p>忘记密码？ <a>立即找回</a></p>
        </div>
    </el-form>
</template>

<script>
import { getCurrentInstance, inject } from "vue";
import { useRouter } from 'vue-router';
export default {
    props: {
        loginUser: {
            type: Object,
            required: true,
        },
        loginRules: {
            type: Object,
            required: true,
        }
    },
    setup(props) {
        const { ctx } = getCurrentInstance();
        const axios = inject('axios')
        const router = useRouter();

        // 触发登录方法
        const handleLogin = (formName) => {
            ctx.$refs[formName].validate((valid) => {
                if (valid) {
                    const { name, password } = props.loginUser;
                    axios.get("/api/applicationCompany/login",
                        {
                            params: {
                                account: name,
                                password: password,
                            }

                        }).then((res) => {
                            if (res.status === 200 && res.data.success === true){
                                console.log(res);
                                localStorage.setItem("companyName", res.data.data.companyName);
                                // 路由跳转
                                router.push("/company")
                            }
                            else {
                                alert("登录失败！");
                                return false;
                            }
                        })
                } else {
                    alert("登录失败！");
                    return false;
                }
            });
        };

        return { handleLogin };
    }
};
</script>

<style scoped>
.loginForm {
    margin-top: 20px;
    background-color: #fff;
    padding: 20px 40px 20px 20px;
    border-radius: 5px;
    box-shadow: 0px 5px 10px #cccc;
}

.submit-btn {
    width: 100%;
}

.tiparea {
    text-align: right;
    font-size: 12px;
    color: #333;
}

.tiparea p a {
    color: #409eff
}
</style>